<script setup lang="ts">
import { onUnmounted, computed } from 'vue'
import { GraphNode, HandleElement } from '@vue-flow/core'

const props = defineProps<{
  sourceX: number,
  sourceY: number,
  targetX: number,
  targetY: number,
  sourceNode: GraphNode,
  targetNode: GraphNode | null,
  sourceHandle: HandleElement | null,
  targetHandle: HandleElement | null
}>()
const emit = defineEmits<{
  'connect-end': [string, string, number, number]
}>()

const centerX = computed(() => (props.sourceX + props.targetX) / 2)
const controlX1 = computed(() => props.sourceX + Math.max(centerX.value - props.sourceX, 25))
const controlX2 = computed(() => props.targetX - Math.max(props.targetX - centerX.value, 25))

onUnmounted(() => {
  if (props.targetHandle || !props.sourceHandle) {
    return
  }
  emit('connect-end', props.sourceNode.id, props.sourceHandle.id as string, props.targetX, props.targetY)
})
</script>
<template>
  <g>
    <path class="vue-flow__connection" fill="none" stroke="#FFFFFF66" :stroke-width="1.5"
      :d="`M${sourceX},${sourceY} C ${controlX1} ${sourceY} ${controlX2} ${targetY} ${targetX},${targetY}`" />

    <circle :cx="targetX" :cy="targetY" fill="#fff" :r="4" stroke="#FFFFFF66" :stroke-width="1.5" />
  </g>
</template>
